<template>
  <div class="model_control">
    <div class="model_control_options">
      <el-button type="primary" size="default"  @click="loadModel('3dtiles')">3DTILES模型</el-button>
      <!--<el-button type="primary" size="default" @click="loadModel('glb')">GLB模型</el-button>-->
    </div>
    <div style="width: 100%;height: 100%;" class="map_content" id="map_content"></div>
  </div>
</template>
  
  <script lang="ts" setup>
import { onMounted, ref,watch  } from "vue";
import { initMap } from "./js/initMap";
import  loadLayer from './js/loadLayers'
const qycsState = ref(false);
const isShow = ref(false);
const cviewer:any=ref(undefined)
const loadModel=(type:string)=>{
  if(type==="glb"){
    loadLayer.loadGlbOrGltf(cviewer.value,{
        url:"./model/building_1.glb",
        position:{
            x:119.31,
            y:32.11,
            z:1
        }
    })
  }else{
    loadLayer.load3dtiles(cviewer.value,{
      url:'./model/tiles/single_building/tileset.json',
      maximumScreenSpaceError:16,
      position:{
        x:119.318,
        y:32.119,
        z:1
      }
    })
  }
}

onMounted(() => {
  cviewer.value=  initMap("map_content", [0, 0, 0, 0]);
});
watch(qycsState,(n,o)=>{
  isShow.value=n;
})
</script>
  
  <style  lang="scss"  scoped>
.model_control {
  width: 100%;
  height: 100%;
  .model_control_options {
    margin: 10px;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 1;
  }
}
</style>
